<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js_作用域闭包</title>
</head>

<body>
    <h2>js_作用域闭包</h2>
    <p>所有的自由变量的查找，是在函数定义的地方，向上级作用域查找，不是在执行的地方！！</p>
    <div>
        闭包是 JS 函数作用域的副产品。 <br> 正是由于 JS 的函数内部可以使用函数外部的变量， <br> 所以这段代码正好符合了闭包的定义。 <br> 而不是 JS 故意要使用闭包。
    </div>
    <div>
        闭包是指一个可以访问另外一个函数作用域中的变量的函数（定义在函数内部的函数）。<br> 作用大概就是形成块级作用域以及私有变量。
    </div>

    <div>
        总结：<br> 闭包就是能够读取其他函数内部变量的函数。
        <br> 闭包是将函数内部和函数外部连接起来的桥梁。
        <br><br> 闭包就是能够读取其他函数内部变量的函数。
        <br> 是 JS 函数作用域的副产品。<br> 自由变量的查找，是在函数定义的地方，向上级作用域查找。
        <br>
        <br>Babel 是编译工具，把高版本语法编译成低版本语法，或者将文件按照自定义规则转换成js语法。
        <br>webpack 是打包工具，定义入口文件，将所有模块引入整理后，通过loader和plugin处理后，打包输出。
        <br>webpack 通过 babel-loader 使用 Babel 。
        <br>Loader对模块源码的转换（CSS-Loader，Style-Loader）
        <br>Plugin从打包优化和压缩，到重新定义环境变量，功能强大到可以用来处理各种各样的任务插件
        <br>
        <br>
        <br>当vue实例化的时候，vue会遍历data里面的属性，
        <br>通过object.definePrototype将它们转化为getter和stter并在内部追踪相关依赖，
        <br>在属性被访问或者修改的时候进行更新。
        <br>
        <br> vuex的理解
        <br>核心属性是state、getter(计算)、mutation（更新状态）、action（异步处理）、module
        <br>this.$store.commit 修改 mutation
        <br>action的调用使用 $store.dispatch
        <br>
    </div>
</body>
<script>
    // function creat() {
    //     let a = 2222;
    //     return function() {
    //         console.log(a)

    //     }
    // }
    // let fn = creat()
    // let a = 333;
    // fn() //2222

    function print(fn) {
        let a = 2
        fn()
    }
    let a = 3333

    function fn() {
        console.log(a)
    }
    print(fn) //3333
    function bindEvent(elem, type, selector, fn) {
        if (fn == null) {
            fn = selector
            selector = null
        }
        elem.addEventListener(type, event => {
            const target = event.target
            if (selector) {
                // 代理绑定
                if (target.matches(selector)) {
                    fn.call(target, event)
                }
            } else {
                // 普通绑定
                fn.call(target, event)
            }
        })
    }
</script>

</html>